<!doctype html>
<html lang="en-gb" class="no-js">
<head>
    {% load staticfiles %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--[if lt IE 9]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <![endif]-->
    <title>My Blog</title>
    <meta name="description" content="DIY Blog">
    <meta name="author" content="ximin.li">
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if lte IE 8]>
		<script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
	<![endif]-->
    <link rel="stylesheet" href="{% static 'blog/css/bootstrap.min.css'%}" />
    <!--<link rel="stylesheet" type="text/css" href="{% static 'blog/css/isotope.css'%}" media="screen" />-->
    <link rel="stylesheet" href="{% static 'blog/js/fancybox/jquery.fancybox.css'%}" type="text/css" media="screen" />
    <link rel="stylesheet" type="text/css" href="{% static 'blog/css/da-slider.css'%}" />
    <!-- Owl Carousel Assets -->
    <link rel="stylesheet" href="{% static 'blog/js/owl-carousel/owl.carousel.css'%}" />
    <link rel="stylesheet" href="{% static 'blog/css/styles.css'%}" />
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{% static 'blog/font/css/font-awesome.min.css'%}" />
</head>
<body>
    <header class="header">
        <div class="container">
            <nav class="navbar navbar-inverse" role="navigation">
                <div class="navbar-header">
                    <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand scroll-top logo"><b>My Blog</b></a>
                </div>
                <!--/.navbar-header-->
                <div id="main-nav" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav" id="mainNav">
                        <li class="active"><a href="#home" class="scroll-link">Home</a></li>
                        <li><a href="#aboutUs" class="scroll-link">About Us</a></li>
                        <li><a href="#skills" class="scroll-link">Skills</a></li>
                        <li><a href="#experience" class="scroll-link">Experience</a></li>
                        <li><a href="#portfolio" class="scroll-link">Portfolio</a></li>
                        <li><a href="#contactUs" class="scroll-link">Contact Us</a></li>
                    </ul>
                </div>
                <!--/.navbar-collapse-->
            </nav>
            <!--/.navbar-->
        </div>
        <!--/.container-->
    </header>
    <div id="#top"></div>
    <section id="home">
        <div class="banner-container">
            <img src="{% static 'blog/images/banner-bg.jpg'%}" alt="banner" />
            <div class="container banner-content">
                <div id="da-slider" class="da-slider">
                {% for article in article_list %}
                    <div class="da-slide">
                        <h2><a href="{% url 'detail' article.id%}">{{ article.title}} </a></h2>
                        <p>{{article.category}}</p>
                        <div class="da-img"></div>
                    </div>
                {% endfor %}
                </div>
            </div>
        </div>
    </section>

    <footer>
            <div class="container">
                <div class="social text-center">
                    <a href="#"><i class="fa fa-twitter"></i></a>
                    <a href="#"><i class="fa fa-facebook"></i></a>
                    <a href="#"><i class="fa fa-dribbble"></i></a>
                    <a href="#"><i class="fa fa-flickr"></i></a>
                    <a href="#"><i class="fa fa-github"></i></a>
                </div>

                <div class="clear"></div>
                <!--CLEAR FLOATS-->
            </div>
    </footer>
    <!--[if lte IE 8]><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><![endif]-->
    <script src="{% static 'blog/js/modernizr-latest.js'%}"></script>
    <script src="{% static 'blog/js/jquery-1.8.2.min.js'%}" type="text/javascript"></script>
    <script src="{% static 'blog/js/bootstrap.min.js'%}" type="text/javascript"></script>
    <script src="{% static 'blog/js/jquery.isotope.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'blog/js/fancybox/jquery.fancybox.pack.js' %}" type="text/javascript"></script>
    <script src="{% static 'blog/js/jquery.nav.js' %}" type="text/javascript"></script>
    <script src="{% static 'blog/js/jquery.cslider.js' %}" type="text/javascript"></script>
    <script src="{% static 'blog/js/custom.js' %}" type="text/javascript"></script>
    <script src="{% static 'blog/js/owl-carousel/owl.carousel.js' %}"></script>
</body>
</html>